<script setup lang="ts">
import { gsap } from 'gsap'

const textRefs = ref([])

onMounted(() => {
  const tl = gsap.timeline()

  tl.from(textRefs.value, {
    y: 50,
    opacity: 0,
    duration: 1,
    ease: 'power3.out',
    stagger: 0.2
  })
})
</script>

<template>
  <main class="text h-screen w-full bg-black pl-5vw pt-10vw text-white leading-loose">
    <div :ref="el => textRefs[0] = el">
      * 如果你在手机上浏览，请长按屏幕 3s+
    </div>
    <div :ref="el => textRefs[1] = el">
      * 如果你在电脑上浏览，请长按 n 或 N 键 3s+
    </div>
  </main>
</template>

<style lang="scss" scoped>
@use '@/assets/fonts/ZCOOL_KuaiLe.css';

.text {
  font-family: "ZCOOL KuaiLe", sans-serif;
  font-size: clamp(14px, 2vw, 60px);
}
</style>
